<template>
  <div class="home">
    <el-title :title="title"></el-title>
    <div class="task_cn">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, i) in ctypeDate" :key="i" :label="item.name + '(' + item.num + ')'" :name="item.index">
          <el-task @child-total="childToatl" :ctype="item.ctype"></el-task>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import elTitle from '@/components/title'
import elTask from '@/components/task/my_task'
export default {
  data() {
    return {
      title: '我的发布',
      activeName: 'first',
      num: [],
      ctypeDate: [
        { ctype: '', num: '', name: '全部', index: 'first' },
        { ctype: 'Under_review', num: '', name: '已处理', index: 'second' },
        { ctype: 'To_audit', num: '', name: '未处理', index: 'third' },
        { ctype: 'return', num: '', name: '退回', index: 'four' },
        { ctype: 'completed', num: '', name: '已完成', index: 'five' },
        // { ctype: 'comment', num: '', name: '已评价', index: 'sex' },
      ],
    }
  },
  components: {
    elTitle,
    elTask,
  },
  methods: {
    childToatl(val) {
      console.log(val)
      this.num.push({ num: val.num })
      console.log(this.num)
      this.ctypeDate.forEach((item, index) => {
        if (item.num == '' && this.num[index] != undefined) {
          this.ctypeDate[index].num = this.num[index].num
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="scss" scoped>
.task_cn::v-deep {
  background-color: white;
  margin-top: 20px;
  padding: 20px 25px;
  .is-top {
    padding: 0 7px;
  }
  .el-tabs__item {
    padding: 0 20px;
  }
  .el-tabs__header {
    margin-bottom: 25px;
  }
}
</style>
